<template>
  <div class="refundlist" ref="homePage">
    <van-nav-bar @click-left="clickleft" style="background: #ececec;" title="退款/售后" left-text=""left-arrow>
      <div slot="right" class="searcha">
      </div>
    </van-nav-bar>
    <div class="item" @click="Jumporder()">
      <p class="orderid">订单号：7964157069609239453</p>
      <div class="center">
        <div class="left">
          <div class="p_img">
            <img width="100%" src="https://resource.sz-trip.com/uploads/20190421/9c590489fdd20673be28c25ab062b8e6.jpg" />
          </div>
          <p class="title">苏州博物馆预约【0元门票】</p>
        </div>
        <div class="right">
          <span class="real-money">￥0.00</span>
          <span class="number">x1</span>
        </div>
      </div>
      <div class="state">
        <van-icon size="20px" color="#46d0ca" style="margin-right: 0.3125rem;" name="refund-o" />
        <span>订单退款</span>
      </div>
      <div class="btns">
        <div class="btn">查看详情</div>
      </div>
    </div>

  </div>
</template>

<script>
  export default {

    data() {
      return {
        clintHeigth: '', //获取页面高度
        type: this.$route.query.type,

      }
    },

    mounted() {
      this.clientHeight = `${document.documentElement.clientHeight}` //document.body.clientWidth;
      // console.log(this.clientHeight);
      // let dd = 100;
      this.$refs.homePage.style.minHeight = this.clientHeight + 'px';
    },
    methods: {
      clickleft() {
        this.$router.back(-1);
        console.log(1)
      },
      Jumporder() {
        this.$router.push({
          path: "/User/orderDetail",
          query: {
            // type: type,
          }
        })
      },
    }
  }
</script>

<style lang="scss">
  .refundlist {
    .van-nav-bar {
      .van-nav-bar__left {
        .van-icon {
          color: #46d0ca !important;
          font-size: 1.25rem;
        }
      }

    }
    .item{
      background: #FFFFFF;
      margin-bottom: 0.625rem;
      .orderid{
        padding: 0 0.625rem;
        line-height: 2rem;
        font-size: 0.875rem;
      }
      .center{
        display: flex;
        padding: 0.3125rem 0.625rem;
        background: #f6f6f6;
        justify-content: space-between;
        .left{
          display: flex;
          .p_img{
            width: 4.8125rem;
            overflow: hidden;
            align-items: center;
            justify-content: center;
          }
          .title{
            width: 12.1875rem;
            line-height: 0.9375rem;
            overflow: hidden;
            font-size: 0.8125rem;
            height: 1.875rem;
            margin-left: 0.625rem;
            margin-top: 0.3125rem;
          }
        }
        .right{
          display: flex;
          flex-direction: column;
          align-items: flex-end;
          font-size: 0.625rem;
          color: #999;
          margin-top: 0.3125rem;
          line-height: 1.125rem;
          .real-money{
            color: #444;
            font-size: 0.75rem;
          }
        }
      }
      .state{
        border-bottom: 0.0625rem solid #eee;
        display: flex;
        align-items: center;
        font-size: 0.875rem;
        padding: 0 0.625rem;
        line-height: 2rem;
      }
      .btns{
        display: flex;
        padding: 0 0.625rem;
        justify-content: flex-end;
        .btn{
          width: 4.6875rem;
          height: 1.625rem;
          border: 0.0625rem solid #46d0ca;
          margin: 0.3125rem 0;
          margin-left: 0.3125rem;
          border-radius: 0.8125rem;
          font-size: 0.75rem;
          text-align: center;
          line-height: 1.625rem;
          color: #46d0ca;
        }
      }
    }
  }
</style>
